<!--频道增加-->
<template>
  <div>


    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item>

        <el-button type="primary" @click="submitForm('ruleForm','yes','add')" v-if="crFlag">创建</el-button>
        <el-button type="primary" @click="submitForm('ruleForm','yes','update')" v-if="saveFlag">保存</el-button>
        <el-button @click="resetForm('ruleForm')">返回</el-button>
      </el-form-item>


      <el-form-item label="频道名称" prop="title">
        <el-input v-model="ruleForm.title" autocomplete="false" placeholder="请输入频道名称"
                  :disabled="titleFlat"
        ></el-input>
      </el-form-item>

      <el-form-item label="频道描述">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入描述"
          v-model="channel.descre"
          :disabled="descreFlag"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="频道图标">
        <uploadCard @func="getPreUrl" ref="uploadPre"
                    :imgFlag="imgFlag"
                    :limit="1"
                    :listType="uploadParam.LIST_TYPE_PICTURE_CARD"
                    :tip="uploadParam.TIP_PICTURE"
                    upType="选取图标"
        ></uploadCard>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm','yes','add')" v-if="crFlag">创建</el-button>
        <el-button type="primary" @click="submitForm('ruleForm','yes','update')" v-if="saveFlag">保存</el-button>
        <el-button @click="resetForm('ruleForm')">返回</el-button>
      </el-form-item>


    </el-form>


  </div>

</template>
<script>

  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import {StringUtil} from "../../utils/StringUtil";
  import uploadCard from "../../components/UploadCard"
  import {Channel} from "../req/Channel";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {Handle} from "../constant/Handle";
  import {UploadParam} from "../constant/UploadParam";
  let channel = new Channel();
  export default {
    data() {

      var validateTitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入频道名称'));
        }
        callback();
      };

      return {
        handle: this.$route.query.handle, //接收的处理
        inputFlat: true,
        channel,
        ruleForm: {
          title: '',
        },
        rules: {
          title: [
            {validator: validateTitle, trigger: 'blur'}
          ],
        },
        titleFlat: false,//标题开关
        descreFlag: false,//描述开关
        imgFlag: false,//图片开关
        id: this.$route.query.id,
        saveFlag: true, //保存的开关
        crFlag: true,//创建的开关
        uploadParam: UploadParam,

      };

    },

    methods: {
      /**
       * 获取文档上传地址
       * @param data
       */
      getPreUrl: function (data) {

        this.channel.ico = data.split("&&")[0];

      },
      /**
       * 提交 todo 解决图片需要二次上传的问题 原因是图片是异步上传的，没有获取返回值，需要改成同步上传
       * https://www.jianshu.com/p/93f011981a47
       * @param formName
       * @param isSend
       */
      submitForm: async function (formName, isSend, handler) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            console.log('error submit!!');
            this.inputFlat = false;
            return false;
          }
        });
        if (!this.inputFlat) {
          return;
        }
        this.channel.id = this.id;
        if (handler == Handle.UPDATE) {
          if (StringUtil.checkNull(channel.id)) {
            this.$notify(StringUtil.warning("未获取到频道id，请先创建频道"))
            return;
          }
        }
        await this.$refs.uploadPre.submitUpload();
        this.channel.handle = handler;
        this.channel.channelName = this.ruleForm.title;
        this.channel.isOpen = isSend;
        this.channel.count = this.count;
        this.$axios
          .post('/channel/save',
            this.channel, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              this.$notify(StringUtil.success(datas.msg));
              this.$router.push({name: 'channelManage'})
            } else {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })


      },
      resetForm(formName) {
        this.$router.push({name: 'channelManage'});
      },
      /**
       * 获取频道详情
       * @param id
       */
      getDetail(id) {
        this.channel.handle = Handle.QUERY;
        this.channel.id = id;

        this.$axios
          .post('/channel/save',
            this.channel, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            this.channel = datas.data;
            this.ruleForm.title = this.channel.channelName;
            //调取图片组件的方法
            this.$refs.uploadPre.receiveFileList(this.channel.ico);

          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 组件初始化设置
       * @param data
       */
      initDefault(data) {
        switch (data) {
          case Handle.QUERY:
            this.titleFlat = true;
            this.descreFlag = true;
            this.imgFlag = true;
            this.crFlag = false;
            this.saveFlag = false;
            break;
          case Handle.UPDATE:
            this.crFlag = false;
            break;
          case Handle.ADD:
            this.saveFlag = false;
            break;

          default:
            break;
        }
      },
    },
    components: {
      uploadCard,
    },
    mounted() {
      //根据传来的handle进入组件默认值设计
      this.initDefault(this.handle);
      //这个方法会导致检验失效，找了半天。
      if (this.handle != Handle.ADD) {
        this.getDetail(this.id);
      }

    }
  };
</script>


